<template>
	<view class="main">
		<view class="content">
			<!-- <view class="userInfo-eare">
				<view class="info">
					<view class="user">
						<van-image
							class="avatarUrl"
							round
							width="160rpx"
							height="160rpx"
							:src="userinfo.headimgurl"
						/>
				        <view>
				          <van-cell-group inset>
				            <van-field class="name" v-model="userinfo.nickname" label="微信昵称:" />
				          </van-cell-group>
				        </view>
					</view>
					<van-button @click="getWeChatCode" color="linear-gradient(to right, #ff6034, #ee0a24)" v-if="isShow" round class="btn">登录</van-button>
				</view>
				
				<view class="fans-column">
					<view class="column">
				        <text class="number">{{this.productNumber}}</text>
						<text class="text">产品</text>
					</view>
				
					<view class="column">
				        <text class="number">{{this.myIdentity}}</text>
						<text class="text">我的身份</text>
					</view>
				
					<view class="column">
				        <text class="number">{{this.cardNumber}}</text>
						<text class="text">保修卡</text>
					</view>
				</view>
			</view> -->
			
			<view class="userInfoMsg-eare">
				<van-divider v-if="list.length==0"  :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">暂无售后卡</van-divider>
				<van-divider v-else  :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">我的售后卡</van-divider>


				<view class="" v-for="item in list" v-if="list.length >0">
					
				<van-cell-group inset :title="item.product_title" >
				      <!-- <van-cell value-class="value-class" title="我的保修卡：" :value="this.cardNumber" is-link @click="showCodeLogDetails()"/> -->
				      <van-cell value-class="value-class" title="产品名称：" :value="item.product_title" />
				      <van-cell value-class="value-class" title="激活时间：" :value="timeStr(item.usetime)" />
				      <van-cell value-class="value-class" title="有效时间：" :value="timeStr(item.end_time)" />
				      <van-cell title="查看明细"  is-link :to="'/pages/user/codeLogDetail?id='+item.id" /> 
				</van-cell-group>
				</view>
				<view class="van-cards" >
				</view>
			
				
			</view>
			<van-tabbar v-model="active" >
			  <van-tabbar-item icon="home-o" to="/pages/index/index">首页</van-tabbar-item>
			  <!-- <van-tabbar-item icon="search">标签</van-tabbar-item> -->
			  <van-tabbar-item icon="friends-o" to="/pages/user/index">我的</van-tabbar-item>
			  <!-- <van-tabbar-item icon="setting-o">标签</van-tabbar-item> -->
			</van-tabbar>
			
		</view>
	</view>
</template>

<script>
	import {showToast, showSuccessToast, showFailToast } from 'vant';
	import wxjs from "@/utils/wxjsdk.js";
	import axios from 'axios';
	export default {
		data() {
			return {
				userinfo: uni.getStorageSync('userinfo') || {},
				openid : uni.getStorageSync('openid'),
				isShow: true, // 是否显示登录按钮
				active: 1,  // 选中的tab
				avatarUrl: '', // 头像
				nickname: '', // 昵称
				cardNumber: '', //保修卡数量
				createTime: '', //加入时间
				productNumber: '', //产品数量
				myIdentity: '', //我的身份
				list:[]
			}
		},
		onLoad() {
			console.log('userinfo',this.userinfo)
			this.getCodeLogListByUser()
		
		},
		
		methods: {
			getCodeLogListByUser(){
					axios({
						method: 'POST',
						url: 'https://service.wulings.com/api/code/getCodeLogListByUser',
						data: {
						  "openid": this.openid,
						},
						headers: {
						  'Content-Type': 'application/x-www-form-urlencoded'
						}
					})
					.then(res => {
						this.list = res.data.data;
						console.log("this.codeLogList",this.list)
					})
			},
			timeStr(timestamp) {
				timestamp = parseInt(timestamp)
					if (timestamp < 2000000000) timestamp = timestamp * 1000
						console.log(timestamp)
							var date = new Date(timestamp);
							const year = date.getFullYear();
							const month = ("0" + (date.getMonth() + 1)).slice(-2);
							const day = ("0" + date.getDate()).slice(-2);
							const hour = ("0" + date.getHours()).slice(-2);
							const minute = ("0" + date.getMinutes()).slice(-2);
							const second = ("0" + date.getSeconds()).slice(-2);
							return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
			},
		}
	}
</script>

<style>
	::v-deep .van-field__control {
	  background-color: transparent;
	}
	
	::v-deep .value-class{
		color: #000000;
	}
	
	.fans-column {
	  display: flex;
	  width: 100%;
	  margin-top: 15px;
	}
	
	.number {
	  margin-bottom: 5px;
	  text-align: center;
	  font-weight: bold;
	}
	
	.text{
	  text-align: center;
	  color: #fff;
	}
	
	.column {
	  margin-top: 15px;
	  width: 33%;
	  display: grid; 
	}
	
	.user{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.avatarUrl {
	  position: absolute;
	  left: 35px;
	  top: 80px;
	}
	
	.name{
		position: absolute;
		left: 110px;
		top: 110px;
		background-color: rgba(255, 0, 0, 0);
	}
	
	.info{
		padding-top: 150rpx;
		  margin-top: -55px;
		  width: 100%;
		  display: flex;
		  justify-content:space-between;
		  align-items: center;
	}
	.content {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
	}
	
	.main {
		/* background-color: #f7f8fa; */
		height: 100%;
	}
	
	.btn{
		margin-top: 30px;
		margin-right: 20px;
		width: 100px;
	}
	
	.userInfo-eare {
	  width: 100%;
	  height: 40%;
	  /* background-image: linear-gradient(-20deg, #fc6076 0%, #ff9a44 100%);
	   */
	  /* background-color: #008cf8; */
	  background-image: linear-gradient(-20deg, #fc6076 0%, #008cf8 100%);
	  border-bottom-left-radius: 50% 16%;
	    border-bottom-right-radius: 50% 16%;
	  margin-bottom: 25px;
	}
	
	.vant-cell {
		margin-bottom: 10px;
	}
	
	
</style>